<template>
	<view class="container">
		<button open-type="share" class="share-btn">
			<van-icon name="share-o" size="20" />
			<text>分享</text>
			<text>职位</text>
		</button>
		<!-- <view class="safe-box">
			<van-icon name="umbrella-circle" color="#299E73" size="16" />
			<text>本职位经官方验证，请放心报名！</text>
		</view> -->
		<view class="box-view">
			<view class="job-detail">
				<view class="job-title">
					<text class="van-ellipsis">{{ jobData.name }}</text>
					<van-icon @click="updateCollect" name="star" size="20" color="#07C160" v-if="jobData.iscollect" />
					<van-icon @click="updateCollect" name="star-o" size="20" v-else />
				</view>
				<view class="job-price">{{ jobData.salary }}</view>
				<view class="tag" v-if="jobData.taglist.length">
					<view class="tag-item" v-for="(tag_item, tag_index) in jobData.taglist" :key="tag_index">{{ tag_item }}</view>
				</view>
			</view>
		</view>
		<view class="box-view">
			<view class="job-require">
				<view class="require">
					<text>{{ jobData.personCount }}人</text>
					<text>{{ jobData.condsex }}</text>
					<text>{{ jobData.condage }}岁</text>
					<text>{{ jobData.condXueli }}</text>
				</view>
				<!-- <view class="match">
					<view class="match-text">
						匹配度
						<text>94%</text>
					</view>
					<van-progress :showPivot="false" color="#EB665F" percentage="50" />
				</view> -->
			</view>
		</view>
		<view class="box-view">
			<view class="title">工作时间</view>
			<view class="time">
				<view class="content-item">
					<text>工作日期：</text>
					{{ jobData.conddate }}
				</view>
				<view class="content-item">
					<text>工作时段：</text>
					{{ jobData.condtime }}
				</view>
			</view>
			<view class="title">面试地点</view>
			<view class="location">
				<view class="content">
					<van-icon name="location-o" size="26" color="#07C160" />
					<text>{{ jobData.workaddress }}</text>
					<van-icon name="arrow" size="20" color="#D6D6D8" />
				</view>
			</view>
			<view class="title">工作内容</view>
			<view class="job-content"><rich-text :nodes="jobData.condDuty | htmlFormat"></rich-text></view>
			<!-- <view class="title">企业信息</view>
			<view class="company">
				<image class="logo" src="https://xike001.oss-cn-hangzhou.aliyuncs.com/job/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20220718094542.png"></image>
				<view class="content">
					<view class="company-title">
						<text>官方直聘</text>
						<view class="is-auth">
							<van-icon name="diamond" color="#07C160" size="16" />
							<text>已认证</text>
						</view>
					</view>
					<view class="company-sore">
						<text>4</text>
						<view class="right">
							<van-rate readonly value="4" size="20" color="#ffd21e" void-icon="star" void-color="#eee" />
							<text>44人 评价</text>
						</view>
					</view>
				</view>
				<van-icon name="arrow" size="20" color="#D6D6D8" />
			</view> -->
			<!-- <view class="fuli"><image mode="widthFix" src="@/static/fuli.png" class="img"></image></view> -->
			<view class="title">报名流程</view>
			<view class="process">
				<view class="item">
					<image src="@/static/1.png"></image>
					<text>免费报名</text>
				</view>
				<view class="division"><van-icon name="arrow" color="#07C160" /></view>
				<view class="item">
					<image mode="heightFix" src="@/static/2.png"></image>
					<text>企业邀约</text>
				</view>
				<view class="division"><van-icon name="arrow" color="#07C160" /></view>
				<view class="item">
					<image mode="heightFix" src="@/static/3.png"></image>
					<text>同意邀约</text>
				</view>
				<view class="division"><van-icon name="arrow" color="#07C160" /></view>
				<view class="item">
					<image mode="heightFix" src="@/static/4.png"></image>
					<text>到店面试</text>
				</view>
			</view>
		</view>
		<view class="box-view">
			<view class="shield">
				<view class="shield-title">
					<van-icon name="shield-o" color="#30A178" />
					<text>安全小贴士</text>
				</view>
				<view class="shield-content">
					所有职位不收取任何费用，如有不实请
					<text @click="goComplain">举报</text>
				</view>
			</view>
		</view>
		<view class="box-view" style="background-color: transparent;">
			<view class="title">推荐职位</view>
			<view class="recommend">
				<view class="job-list">
					<view class="job-item" v-for="(item, index) in recommonJob" :key="index" @click="goJobDetail(item)">
						<view class="top">
							<view class="title">
								<text>{{ item.name }}</text>
								<text class="distance">距你{{ item.distance }}</text>
							</view>
							<view class="tag" v-if="item.taglist.length">
								<view class="tag-item" v-for="(tag_item, tag_index) in item.taglist" :key="tag_index">{{ tag_item }}</view>
							</view>
						</view>
						<view class="bottom">
							<text class="price">{{ item.salary }}</text>
							<view class="look-btn">去看看</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tabbar-box">
			<view class="tabbar">
				<view class="tabbar-item" @click="back">
					<van-icon name="home-o" size="26" />
					<text>更多工作</text>
				</view>
				<view class="tabbar-item"><van-button type="warning" block @click="contactCompany">联系企业</van-button></view>
				<view class="tabbar-item">
					<van-button v-if="!jobData.isSign" type="danger" block @click="signUp">立即报名</van-button>
					<van-button v-else disabled type="default" block>已报名</van-button>
				</view>
			</view>
		</view>
		<!-- 报名确认窗口 -->
		<uni-popup ref="signUpDialog" type="dialog">
			<uni-popup-dialog cancelText="我再看看" confirmText="确认报名" title="提示" content="确认报名？" @confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 报名结果窗口 -->
		<uni-popup ref="signUpResultDialog" :mask-click="false">
			<view class="signup-box">
				<view class="content">
					<van-icon name="checked" size="30" color="#07C160" />
					<view class="result">报名成功，主动联系企业更容易获得面试机会</view>
				</view>
				<view class="btns">
					<view @click="dialogClose3">稍后联系</view>
					<view @click="dialogConfirm3">马上联系</view>
				</view>
			</view>
		</uni-popup>
		<!-- 联系企业窗口 -->
		<uni-popup ref="companyDialog" type="dialog">
			<uni-popup-dialog
				cancelText="取消"
				confirmText="立即报名"
				title="提示"
				content="拨打企业电话需先报名职位哦？"
				@confirm="dialogConfirm2"
			></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import { getJobInfo, getRecommJobList, updateJobCollect,signJob } from '@/api/job.js'
import graceRichText from '@/utils/rechText.js'
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			jobData: {},
			recommonJob: [],
			page: 1,
			pagesize: 10
		}
	},
	computed: {
		...mapState(['location'])
	},
	filters: {
		htmlFormat(str) {
			return str ? graceRichText.format(str) : ''
		}
	},
	onLoad(e) {
		//isSign
		if (e) {
			getJobInfo({
				jobid: e.id
			})
				.then(res => {
					this.jobData = res

					this.loadRecommonJob()
				})
				.catch(err => {
					uni.showToast({
						title: '加载职位详情失败',
						icon: 'none'
					})
				})
		}
	},
	onReachBottom() {
		this.loadRecommonJob()
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内转发按钮
			console.log(res.target)
		}
		let that = this
		return {
			title: this.jobData.name,
			path: `/pages/index/job/detail?id=${this.jobData.id}`
		}
	},
	methods: {
		goJobDetail(item) {
			uni.navigateTo({
				url: `./detail?id=${item.id}`
			})
		},
		updateCollect() {
			updateJobCollect({
				jobid: this.jobData.id
			}).then(res => {
				this.jobData.iscollect = !this.jobData.iscollect
			})
		},
		goComplain() {
			uni.navigateTo({
				url: `/pages/interview/subPages/complain?id=${this.jobData.id}`
			})
		},
		loadRecommonJob() {
			let params = {
				page: this.page,
				pagesize: this.pagesize,
				lng: this.location.longitude,
				lat: this.location.latitude
			}

			getRecommJobList(params).then(res => {
				if (res.length) {
					this.recommonJob = this.recommonJob.concat(res)
					this.page++
				}
			})
		},
		back() {
			this.$tools.back()
		},
		contactCompany() {
			if(this.jobData.isSign)
			{
				uni.makePhoneCall({
					phoneNumber:this.jobData.phoneNumber
				})				
			}
			else
			{
				this.$refs['companyDialog'].open()
			}
		},
		signUp() {
			this.$refs['signUpDialog'].open()
		},
		dialogConfirm(){
			signJob({
				jobid:this.jobData.id
			}).then(res => {
				this.jobData.isSign = true
				this.$refs['signUpResultDialog'].open()
			}).catch(err => {
				uni.showToast({
					title: err,
					icon: 'none'
				})
			})
		},
		dialogConfirm2(){
			this.$refs['signUpDialog'].open()
		},
		dialogConfirm3(){
			uni.makePhoneCall({
				phoneNumber:this.jobData.phoneNumber
			})
			setTimeout(() => {
				this.$refs['signUpResultDialog'].close()
			},2000)
		},
		dialogClose3(){
			this.$refs['signUpResultDialog'].close()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .van-button--warning {
	background-color: #fb7124;
}
::v-deep .van-button--danger {
	background-color: #f4435d;
}
</style>
<style lang="scss" scoped>
.container {
	position: relative;
	padding-bottom: 120rpx;
	.share-btn {
		position: fixed;
		z-index: 2;
		background-color: #07C160;
		right: 40rpx;
		bottom: 200rpx;
		height: 140rpx;
		width: 140rpx;
		overflow: hidden;
		border-radius: 50%;
		line-height: 1;
		color: #fff;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 30rpx;
		justify-content: center;
		margin: 0;
		padding: 0;
		box-shadow: none;
		&::after {
			border: 0;
		}

		text {
			&:nth-last-of-type(2) {
				margin-bottom: 4px;
				margin-top: 4px;
			}
		}
	}
	.safe-box {
		background-color: #fef0ef;
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 20rpx;
		text {
			margin-left: 10rpx;
		}
	}
	.box-view {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.title {
			font-size: 34rpx;
			font-weight: bold;
			margin: 20rpx 0;
			&:first-of-type {
				margin-top: 0;
			}
			&:last-of-type {
				margin-bottom: 0;
			}
		}
		.time {
			.content-item {
				margin-bottom: 20rpx;
				&:last-of-type {
					margin-bottom: 0;
				}
				text {
					color: #8e8e8e;
				}
			}
		}
		.location {
			padding: 20rpx;
			.content {
				display: flex;
				align-items: center;
				background-color: #fff;
				cursor: pointer;
				text {
					flex: 1;
				}
			}
		}
		.job-content {
		}
		.company {
			display: flex;
			margin-bottom: 20rpx;
			.logo {
				width: 120rpx;
				height: 120rpx;
			}
			.content {
				flex: 1;
				margin-left: 20rpx;
				.company-title {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					.is-auth {
						color: #07C160;
						margin-left: 10rpx;
					}
				}
				.company-sore {
					display: flex;
					align-items: center;
					& > text {
						font-size: 50rpx;
						font-weight: bolder;
					}
					.right {
						flex: 1;
						display: flex;
						flex-direction: column;
						margin-left: 20rpx;
						& > text {
							color: #666666;
						}
					}
				}
			}
		}
		.fuli {
			.img {
				width: 100%;
			}
		}
		.process {
			display: flex;
			.item {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				& > image {
					height: 100rpx;
					width: 100rpx;
					overflow: hidden;
				}
			}
			.division {
				margin-top: 40rpx;
			}
		}
		.shield {
			.shield-title {
				margin-bottom: 20rpx;
				color: #30a178;
				& > text {
					margin-left: 10rpx;
				}
			}
			.shield-content {
				color: #666;
				& > text {
					color: #07C160;
					margin-left: 10rpx;
				}
			}
		}
		.recommend {
			.job-list {
				background-color: #f5f5f5;
				.job-item {
					margin-bottom: 20rpx;
					border-radius: 10rpx;
					background-color: #fff;
					cursor: pointer;
					&:last-of-type {
						margin-bottom: 0;
					}
					.top {
						position: relative;
						padding: 20rpx 20rpx 0 20rpx;
						&::after {
							content: '';
							position: absolute;
							left: 0;
							width: 100%;
							height: 1px;
							background-color: #e5e5e5;
						}
						.title {
							font-size: 30rpx;
							margin-bottom: 20rpx;
							.distance {
								font-size: 20rpx;
								color: #999999;
								float: right;
								margin-top: 5rpx;
							}
						}
						.tag {
							display: flex;
							overflow: hidden;
							margin-bottom: 20rpx;
							.tag-item {
								font-size: 26rpx;
								margin-left: 10rpx;
								padding: 4rpx 8rpx;
								color: #749ced;
								background-color: #edeffc;
								&:first-of-type {
									margin-left: 0;
								}
							}
						}
					}
					.bottom {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 10rpx 20rpx;
						.price {
							color: #07C160;
						}
						.look-btn {
							background-color: #07C160 !important;
							color: #fff;
							padding: 10rpx 20rpx;
							border-radius: 8rpx;
						}
					}
				}
			}
		}
	}
	.job-detail {
		.job-title {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			text {
				font-size: 34rpx;
				font-weight: bold;
			}
		}
		.job-price {
			color: #e04951;
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.tag {
			display: flex;
			.tag-item {
				color: #97b4f2;
				padding: 4rpx 8rpx;
				border-radius: 4rpx;
				background-color: #edeffc;
				margin-left: 5rpx;
				&:first-of-type {
					margin-left: 0;
				}
			}
		}
	}
	.job-require {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.require {
			flex: 1;
			text {
				display: inline-block;
				border-right: 1px solid #9b9b9b;
				padding: 0 10rpx;
				&:last-of-type {
					border-right: 0;
					padding-right: 0;
				}
				&:first-of-type {
					padding-left: 0;
				}
			}
		}
		.match {
			width: 140rpx;
			.match-text {
				font-size: 24rpx;
				text-align: center;
				margin-bottom: 4px;
				color: #666666;
			}
		}
	}
	.tabbar-box {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		border-top: 1px solid #f1f1f1;
		.tabbar {
			display: flex;
			height: 120rpx;
			align-items: center;
			.tabbar-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #666;
				padding: 20rpx;
				cursor: pointer;
				&:nth-of-type(2),
				&:nth-of-type(3) {
					flex: 1;
					display: block;
				}
			}
		}
	}
}
.signup-box{	
	border-radius: 10rpx;
	background-color: #fff;
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 40rpx 20rpx 40rpx;
		.result{
			    margin: 20rpx 0;
			    text-align: center;
		}
	}
	.btns{
		display: flex;
		width: 100%;
		border-top: 1px solid #ECECEC;
		view{
			flex: 1;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			cursor: pointer;
			&:nth-of-type(1){
				border-right: 1px solid #ECECEC;
			}
			&:nth-of-type(2){
				color: #07C160;
			}
		}
	}
}
</style>

